<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // fetch是ajax的升级版,更加灵活和简便,基于promise实现

        // 1.基本用法
        fetch('http://localhost:3000/data1').then(function(data) {
            // 这里返回的是promise对象,text()方法是fetch的一部分,用于获取后台返回的数据
            return data.text();
        }).then(function(data) {
            console.log(data);
        })


        // 2.GET和DELETE传参
        // 配置项:method:HTTP请求方式,body:HTTP请求参数,headers:HTTP请求头

        // 传统GET传递参数
        fetch('http://localhost:3000/data1?id=123', {
            method: 'get'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

        // restful GET传递参数
        fetch('http://localhost:3000/data1/123', {
            method: 'get'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

        // restful DELETE传递参数
        fetch('http://localhost:3000/data1/123', {
            method: 'delete'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

        // 3.POST和PUT传参
        // restful POST传递参数
        fetch('http://localhost:3000/data1', {
            method: 'post',
            body: 'uname=lisi&pwd=123',
            headers: {
                // 表单格式
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

        fetch('http://localhost:3000/data1', {
            method: 'post',
            body: JSON.stringify({
                uname: 'zhangsan',
                pwd: '456'
            }),
            headers: {
                // json格式
                'Content-Type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })


        // restful PUT传递参数
        fetch('http://localhost:3000/data1/123', {
            method: 'put',
            body: JSON.stringify({
                uname: 'zhangsan',
                pwd: '789'
            }),
            headers: {
                // json格式
                'Content-Type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

        // 4.fetch响应数据的格式
        // text()字符串格式
        // json()json对象格式
        fetch('http://localhost:3000/data1').then(function(data) {
            // 这里返回的是promise对象,text()方法是fetch的一部分,用于获取后台返回的数据
            return data.json();
        }).then(function(data) {
            console.log(data);
        })
    </script>
</body>

</html>